<template>
  <div class="tm">
    <a-button-group class="btn-group">
      <a-button @click="enableMoveCeter">
        {{ disableMoveCenter ? 'moveCenter' : 'disabledmoveCenter' }}
      </a-button>
      <a-button @click="disabledDrag">disabledDrag</a-button>
      <a-button @click="enableDrag">enableDrag</a-button>
      <a-button @click="zoomInMap">zoomIn</a-button>
      <a-button @click="zoomOutMap">zoomOut</a-button>
      <a-button @click="disabledDoubleClickZoomIn">disabledDoubleClickZoomIn</a-button>
      <a-button @click="enabledDoubleClickZoomIn">enabledDoubleClickZoomIn</a-button>
    </a-button-group>
    <div id="tm" style="position: relative; width: 100%; height: calc(100% - 80px)"></div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
@Component({
  // TODO: there can use components
})
export default class TianMap extends Vue {
  public Map: any = null;
  public map: any = null;
  public script: any = null;
  public disableMoveCenter = false;
  public mounted() {
    this.loadMapScript(() => {
      
      const zoom = 12;
      this.map = new this.Map.Map('tm');
      this.map.centerAndZoom(new this.Map.LngLat(116.40769, 39.89945), zoom);
      this.map.addEventListener('click', ($evt: any) => {
        // console.log($evt);
        const point = [$evt.lnglat.getLng(), $evt.lnglat.getLat()];
        this.panTo(point);
      });
      this.addControlScale();
      this.addOverViewMap();
      this.addMilitarySymbols();
    });
  }
  public panTo(point: any) {
    if (this.disableMoveCenter == true) {
      this.map.panTo(new this.Map.LngLat(point[0], point[1]));
      this.moveCenter(point, 12);
    }
  }
  public zoomInMap() {
    this.map.zoomIn();
  }
  public moveCenter(point: any, zoom: number) {
    this.map.centerAndZoom(new this.Map.LngLat(point[0], point[1]), zoom);
  }
  public zoomOutMap() {
    this.map.zoomOut();
  }
  public disabledDoubleClickZoomIn() {
    this.map.disableDoubleClickZoom();
  }
  public enabledDoubleClickZoomIn() {
    this.map.enableDoubleClickZoom();
  }
  public enableMoveCeter() {
    this.disableMoveCenter = !this.disableMoveCenter;
  }
  public addControlScale() {
    //创建比例尺控件对象
    const scale = new this.Map.Control.Scale();
    //添加比例尺控件
    this.map.addControl(scale);
  }
  public addOverViewMap() {
    // 小地图 鹰眼
    const miniMap = new this.Map.Control.OverviewMap({
      isOpen: true,
      size: new this.Map.Point(150, 150),
    });
    this.map.addControl(miniMap);
  }
  public disabledDrag() {
    this.map.disableDrag();
  }
  public enableDrag() {
    this.map.enableDrag();
  }
  public addMilitarySymbols() {
    const military = new this.Map.Control.militarySymbols({ position: window.T_ANCHOR_TOP_LEFT });
    this.map.addControl(military);
  }
  public zoom(value: number) {
    this.map.setZoom(value);
  }
  public loadMapScript(callback: any) {
    this.script = document.createElement('script');
    this.script.type = 'text/javascript';
    this.script.src = `http://api.tianditu.gov.cn/api?v=4.0&tk=eca8519d4f5a73759302d5257cb077d4`;

    document.body.appendChild(this.script);
    this.script.onload = () => {
      if (window.T !== undefined && window.T !== null) {
        this.Map = window.T;
        callback && callback();
      }
    };
  }
  public beforeDestroy() {
    console.log('beforeDestroy');
    window.T = null;
    this.Map = null;
    this.map = null;
    document.body.removeChild(this.script);
  }
}
</script>

<style lang='less' scoped>
.tm {
  height: calc(100vh - 247px);
  width: 100%;
}
.btn-group {
  margin-bottom: 10px;
}
</style>